{include file='index/header'/}
<div style="padding: 20px;">
    <div style="background: #FFFFFF;padding: 20px 50px;">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">基本资料</li>
                <li>修改头像</li>
                <li>修改密码</li>
                <li>我的反馈</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">
                            <span class="layui-icon layui-icon-username">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>姓名:
                        </label>
                        <div class="layui-form-mid" id="old_realname">
                            {$Think.session.user->userinfo->realname}
                        </div>
                        <div class="layui-input-inline">
                            <input id="realname" type="text" class="layui-input" value="{$Think.session.user->userinfo->realname}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">
                            <span class="layui-icon layui-icon-cellphone">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>手机:
                        </label>
                        <div class="layui-form-mid" id="old_tel">
                            {$Think.session.user->userinfo->tel|default="尚未上传手机号"}
                        </div>
                        <div class="layui-input-inline">
                            <input id="tel" type="text" class="layui-input" value="{$Think.session.user->userinfo->tel}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">
                            <span class="layui-icon layui-icon-list">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>邮箱:
                        </label>
                        <div class="layui-form-mid" id="old_email">
                            {$Think.session.user->userinfo->email}
                        </div>
                        <div class="layui-input-inline">
                            <input id="email" type="text" class="layui-input" value="{$Think.session.user->userinfo->email}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">
                            <span class="layui-icon layui-icon-user">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>学号:
                        </label>
                        <div class="layui-form-mid">
                            {$Think.session.user.username}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">
                            <span class="layui-icon">&#xe637;</span>加入时间:
                        </label>
                        <div class="layui-form-mid">
                            {$Think.session.user.create_time}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button id="update" class="layui-btn">修改</button>
                            <button id="cancel" class="layui-btn layui-btn-primary">取消</button>
                            <button id="enter" class="layui-btn layui-btn-normal">确定</button>
                        </div>
                    </div>
                </div>

                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        {if $Think.session.user.img}
                        <img src="/uploads/{$Think.session.user.img}" alt="" width="150px" height="150px"><br>
                        {else/}
                        <img src="/static/img/头像默认.png" alt="" width="150px" height="150px"><br>
                        {/if}
                        <br>
                        <button type="button" class="layui-btn" id="upload">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">原密码：</label>
                        <div class="layui-input-inline">
                            <input type="password" class="layui-input" id="oldpassword">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">新密码：</label>
                        <div class="layui-input-inline">
                            <input type="password" class="layui-input" id="newpassword">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">确认密码：</label>
                        <div class="layui-input-inline">
                            <input type="password" class="layui-input" id="newpassword1">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                        <button class="layui-btn" onclick="password_change()">确认修改</button>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <ul>
                        {volist name="feedbacks" id="feedback"}
                        <li>
                            <div class="list_top">
                                {if $feedback->user->img}
                                <img src="/uploads/{$feedback->user->img}" alt="" width="60px" height="60px">
                                {else/}
                                <img src="/static/img/头像默认.png" alt="" width="60px" height="60px">
                                {/if}
                                <div>
                                    <p style="color: #599CD1">{$feedback->user->user_info->realname}</p>
                                    <p style="color: #353535">{$feedback->create_time}</p>
                                </div>
                            </div>
                            <div>
                                {$feedback.content|raw}
                            </div>
                            {if $feedback.return}
                            <div class="return" >
                                已回复:
                                {$feedback.return}
                            </div>
                            {else/}
                            <div class="false_return" >
                                尚未回复
                            </div>
                            {/if}
                        </li>
                        {/volist}
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>
{include file='index/footer'/}
<script>
    $('#realname').hide();
    $('#tel').hide();
    $('#email').hide();
    $('#cancel').hide();
    $('#enter').hide();

    $('#update').click(function () {
        $(this).hide();
        $('#old_realname').hide();
        $('#old_tel').hide();
        $('#old_email').hide();
        $('#realname').show();
        $('#tel').show();
        $('#email').show();
        $('#cancel').show();
        $('#enter').show();
    });
    $('#cancel').click(function () {
        $(this).hide();
        $('#old_realname').show();
        $('#old_tel').show();
        $('#old_email').show();
        $('#realname').hide().val('{$Think.session.user->userinfo->realname}');
        $('#tel').hide().val('{$Think.session.user->userinfo->tel}');
        $('#email').hide().val('{$Think.session.user->userinfo->email}');
        $('#enter').hide();
        $('#update').show();
    });
    $('#enter').click(function () {
       $.post(
           "{:url('update_message')}",
        {
            realname:$('#realname').val(),
            tel:$('#tel').val(),
            email:$('#email').val()
        },
        function (data){
            if (data.statu==200){
                layer.msg(data.msg,function () {
                    window.location.reload();
                })
            } else {
                layer.msg(data.msg)
            }
        }
       )
    });
    function password_change(){
        $.post(
            "{:url('index/update_password')}",
            {
                oldpassword:$('#oldpassword').val(),
                newpassword:$('#newpassword').val(),
                newpassword1:$('#newpassword1').val()
            },
            function (data) {
                if (data.statu==200){
                    layer.msg(data.msg,function () {
                        window.location.reload();
                    })
                } else {
                    layer.msg(data.msg)
                }
            }
        )
    }
    $('#about_me').addClass("layui-nav-itemed");
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
    layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#upload' //绑定元素
            ,url: "{:url('upload_icon')}" //上传接口
            ,done: function(res){
                //上传完毕回调
                if (res.statu==200){
                    layer.msg(res.msg);
                    $('img').attr('src','/uploads/'+res.path);
                } else {
                    layer.msg(res.msg);
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });
</script>
<style>
    .layui-tab-item ul {
        /*width: 70%;*/
        padding: 20px;
        border: 1px solid #EFEFEF;

        box-shadow: 2px 4px 8px #EFEFEF;
    }

    .layui-tab-item li {
        padding: 10px 0px;
        border-bottom: 1px solid #EFEFEF;
    }

    .list_top {
        display: flex;
        margin-bottom: 10px;
    }

    .list_top div {
        margin-left: 20px;
        line-height: 28px;
    }
    .return {
        background: #F2F3F4;
        margin-top: 10px;
        color: #666;
    }
    .false_return{
        margin-top: 10px;
        color: darkred;
    }
    .return p{
        color: #353535;
    }
</style>